<template lang="pug">
  ModuleWrapper(title="高标准农田建设情况" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        legend: {
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: 'category',
          data: ['2016-2018', '2019', '2020'],
          splitLine: false
        },
        yAxis: {
          type: 'value',
          splitLine: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        series: [
         
          {
            name: "建设面积（亩）",
            data: [15200, 12800, 18500],
            type: 'bar',
            barWidth: 20, //柱图宽度
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			},
            itemStyle: {
              normal: {
                //颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#ff8000'
                }, {
                  offset: 1,
                  color: '#341a00'
                }]),
                barBorderRadius: 5
              }
            }
          },
		  {
		    name: "投资额(万元）",
		    data: [2073.38, 1920, 2833.44],
		    type: 'bar',
		    barWidth: 20, //柱图宽度
		  			label:{
		  				show:true,
		  				position:"top",
		  				textStyle:{
		  					color:"#fff"
		  				}
		  			},
		    itemStyle: {
		      normal: {
		        //颜色渐变
		        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		          offset: 0,
		          color: '#1493e7'
		        }, {
		          offset: 1,
		          color: '#07324f'
		        }]),
		        barBorderRadius: 5
		      }
		    }
		  },
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-wrap{
    flex: 1;
  }
}
</style>
